<template>
    <div class="dashboard-container">
      <!-- 顶部统计卡片 -->
      <el-row :gutter="20" class="mb-4">
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon bg-blue">
                <el-icon><Box /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">总商品数</div>
                <div class="stat-value">{{ stats.totalProducts }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon bg-green">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">本月销售额</div>
                <div class="stat-value">¥{{ stats.monthSales }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon bg-orange">
                <el-icon><Warning /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">低库存商品</div>
                <div class="stat-value">{{ stats.lowStock }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :md="6" class="mb-4">
          <el-card shadow="hover">
            <div class="stat-card">
              <div class="stat-icon bg-purple">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-title">总员工数</div>
                <div class="stat-value">{{ stats.totalStaff }}</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 图表区域 -->
      <el-row :gutter="20">
        <el-col :span="24" class="mb-4">
          <el-card>
            <template #header>
              <div class="chart-header">
                <span>销售趋势</span>
                <el-date-picker
                  v-model="dateRange"
                  type="monthrange"
                  range-separator="至"
                  start-placeholder="开始月份"
                  end-placeholder="结束月份"
                  @change="updateChartData"
                />
              </div>
            </template>
            <div class="chart-container">
              <LineChart :chart-data="salesData" />
            </div>
          </el-card>
        </el-col>
  
        <el-col :xs="24" :sm="12" class="mb-4">
          <el-card>
            <template #header>
              <span>库存分类占比</span>
            </template>
            <div class="chart-container">
              <PieChart :chart-data="categoryData" />
            </div>
          </el-card>
        </el-col>
  
        <el-col :xs="24" :sm="12" class="mb-4">
          <el-card>
            <template #header>
              <span>库存预警TOP5</span>
            </template>
            <div class="chart-container">
              <BarChart :chart-data="warningData" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { Box, TrendCharts, Warning, User } from '@element-plus/icons-vue'
  import LineChart from '@/components/charts/LineChart.vue'
  import PieChart from '@/components/charts/PieChart.vue'
  import BarChart from '@/components/charts/BarChart.vue'
  
  // 统计卡片数据
  const stats = ref({
    totalProducts: 128,
    monthSales: 245600,
    lowStock: 15,
    totalStaff: 24
  })
  
  // 日期范围选择
  const dateRange = ref([new Date(), new Date()])
  
  // 销售趋势数据
  const salesData = ref({
    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
    datasets: [{
      label: '销售额（万元）',
      data: [65, 59, 80, 81, 56, 55],
      borderColor: '#409EFF',
      tension: 0.1
    }]
  })
  
  // 分类占比数据
  const categoryData = ref({
    labels: ['电子产品', '办公用品', '日用品'],
    datasets: [{
      data: [45, 30, 25],
      backgroundColor: ['#36a2eb', '#4bc0c0', '#ff9f40']
    }]
  })
  
  // 库存预警数据
  const warningData = ref({
    labels: ['笔记本电脑', '打印纸', '办公椅', '投影仪', '签字笔'],
    datasets: [{
      label: '当前库存',
      data: [15, 28, 35, 42, 50],
      backgroundColor: '#f56c6c'
    }]
  })
  
  // 模拟数据更新
  const updateChartData = () => {
    console.log('更新图表数据:', dateRange.value)
  }
  </script>
  
  <style scoped>
  .dashboard-container {
    padding: 20px;
  }
  
  .stat-card {
    display: flex;
    align-items: center;
  }
  
  .stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  
  .stat-icon .el-icon {
    font-size: 24px;
    color: white;
  }
  
  .bg-blue { background-color: #409EFF; }
  .bg-green { background-color: #67C23A; }
  .bg-orange { background-color: #E6A23C; }
  .bg-purple { background-color: #8E44AD; }
  
  .stat-info {
    flex: 1;
  }
  
  .stat-title {
    font-size: 14px;
    color: #909399;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-top: 5px;
  }
  
  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .chart-container {
    height: 400px;
  }
  </style>